import React from 'react';
import './style.scss';

function IconLeaf() {
  return (
    <svg t="1686389706472" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11743" width="16" height="16"><path d="M1011.328 134.496C900.576 50.56 730.144 0.448 555.424 0.448 339.296 0.448 163.2 75.904 72.256 207.456 29.536 269.248 5.92 342.4 2.048 424.928c-3.456 73.472 8.896 154.72 36.672 242.144C133.6 382.688 398.528 159.968 704 159.968c0 0-285.824 75.232-465.536 308.192-0.096 0.128-2.496 3.104-6.624 8.704a673.76 673.76 0 0 0-91.072 165.312 984.672 984.672 0 0 0-76.8 381.792h128s-19.424-122.208 14.368-262.784c55.904 7.552 105.856 11.296 150.848 11.296 117.664 0 201.376-25.472 263.392-80.128 55.552-48.992 86.208-114.784 118.624-184.448 49.536-106.4 105.664-227.008 268.64-320.16a32 32 0 0 0 3.456-53.312z" fill="#ffffff" p-id="11744"></path></svg>
  );
}

function IconWaterDrop() {
  return (
    <svg t="1686389912856" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13107" width="16" height="16"><path d="M136.533333 634.246095C136.533333 567.588571 169.935238 481.913905 229.571048 379.562667c23.747048-40.706438 51.326781-83.412114 81.978514-127.405105A2906.199771 2906.199771 0 0 1 429.173029 95.583086a2774.250057 2774.250057 0 0 1 49.659123-60.172191l3.969219-4.632381L507.240838 2.633143l24.517486 28.145371 3.959466 4.642134c3.140267 3.666895 6.787657 7.9872 10.942172 12.873142a3313.176381 3313.176381 0 0 1 38.785219 47.289296 2940.362362 2940.362362 0 0 1 117.613714 156.574476c30.593219 43.99299 58.172952 86.698667 81.92 127.405105 59.63581 102.351238 93.037714 188.025905 93.037715 254.683428 0 210.690438-165.800229 381.834971-370.775772 381.834972C302.343314 1016.081067 136.533333 844.936533 136.533333 634.246095m343.186286-497.566476a2801.859048 2801.859048 0 0 0-114.922057 153.102629c-29.696 42.569143-56.32 83.792457-79.160076 122.958019-54.203733 92.94019-84.085029 169.662171-84.085029 221.505828 0 174.947962 137.069714 316.386743 305.688381 316.386743 168.686933 0 305.7664-141.438781 305.7664-316.386743 0-51.843657-29.891048-128.565638-84.094781-221.505828-22.840076-39.165562-49.464076-80.388876-79.091809-122.958019a2869.150476 2869.150476 0 0 0-114.93181-153.112381 4546.998857 4546.998857 0 0 0-27.648-33.811505c-8.572343 10.435048-17.788343 21.7088-27.511467 33.811505" fill="#ffffff" p-id="13108"></path><path d="M507.270095 902.397562c-142.833371 0-258.6624-116.90179-258.6624-261.246781 0-144.286476 134.456076-71.241143 258.6624 0 124.781714 71.553219 258.6624-144.286476 258.6624 0 0 144.335238-115.829029 261.246781-258.6624 261.246781" fill="#ffffff" p-id="13109"></path></svg>
  );
}

export default function MainInfo(props = {}) {
  return (
    <section className="cpn--main-info">
      <div className='info-wrapper g-center-vh'>
        <div className='temperature'>
          27
          <span className='temp-unit'>℃</span>
        </div>
        <div className='weather-info'>
          <span>多云</span>
          <span>31°/25°</span>
        </div>
        <div className='other-info'>
          <div className='capsule-btn' onClick={() => window.$goPage('/aqi')}>
            <span className='icon-wrapper'><IconLeaf /></span>
            空气优19
          </div>
          <div className='capsule-btn ml-20' onClick={() => window.$goPage('/forcast')}>
            <span className='icon-wrapper'><IconWaterDrop /></span>
            2小时内无降雨
          </div>
        </div>
      </div>
    </section>
  );
}
